<template>
  <!-- 订单详情 -->
  <div class="main">
    <!-- <div class="title_">订单详情</div> -->
    <!-- 客户信息 -->
    <!-- v-if="detailData.stockType == 1" -->
    <div class="one_info">
      <div class="name_">门店信息</div>
      <div class="list_">
        <div class="item_">
          <span>门店名称</span>
          <div class="detail">{{ detailData.customer.customerContact }}</div>
        </div>
        <div class="item_">
          <span>联系人</span>
          <div class="detail">{{ detailData.customer.customerName }}</div>
        </div>
        <div class="item_">
          <span>手机号码</span>
          <div class="detail">{{ detailData.customer.customerPhone }}</div>
        </div>
        <div class="item_">
          <span>门店地址</span>
          <div class="detail">
            {{ detailData.customer.customerReceivingAddress }}
          </div>
        </div>
      </div>
      <!-- 门店标签 -->
      <div class="labelList" v-if="detailData.customer.customerTagList.length">
        <div class="left_">标签</div>
        <div class="right_">
          <div
            class="item_"
            v-for="(item, index) in detailData.customer.customerTagList"
            :key="index"
          >
            <div class="one">{{ item.customerType }}</div>
            <span class="xian">/</span>
            <div
              class="two"
              v-for="(item1, index1) in item.tagList"
              :key="index1"
            >
              {{ item1.customerType }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 收货信息 -->
    <div class="three_info">
      <div class="name_">收货信息</div>
      <div class="list">
        <div class="item_">
          <span class="one">收货人</span
          ><span class="desc">{{ detailData.receiverName }}</span>
        </div>
        <div class="item_">
          <span class="one">收货电话</span
          ><span class="desc">{{ detailData.receiverTelephone }}</span>
        </div>
        <div class="item_">
          <span class="one">收货地址</span
          ><span class="desc">{{ detailData.receivingAddress }}</span>
        </div>
      </div>
    </div>

    <!-- 订单信息 -->
    <div class="two_info">
      <div class="name_">
        <span>订单信息</span>
        <span class="orderNumber">订单号：{{ orderNumber }}</span>
      </div>
      <el-table :data="tableData" style="width: 100%; margin-top: 20px">
        <el-table-column prop="" label="序号" align="center" type="index">
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名称" align="center">
        </el-table-column>
        <el-table-column prop="goodsPricing" label="单价(元)" align="center">
        </el-table-column>
        <el-table-column prop="goodsQuantity" label="数量" align="center">
        </el-table-column>
        <el-table-column prop="unit" label="单位" align="center">
        </el-table-column>
        <el-table-column label="发货仓库" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.deliverStock == 1">公司</span>
            <span v-if="scope.row.deliverStock == 2">工厂</span>
          </template>
        </el-table-column>
        <el-table-column label="小计" align="center">
          <template slot-scope="scope">
            <span>{{
              (scope.row.goodsPricing * scope.row.goodsQuantity).toFixed(2)
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer_list">
        <div class="footer_item">
          <div class="left_">支付状态</div>
          <div class="right_ right_1">
            {{ detailData.paymentType == 1 ? "已支付" : "未支付" }}
          </div>
        </div>
        <div class="footer_item" v-if="detailData.paymentType == 1">
          <div class="left_">支付方式</div>
          <div class="right_ right_1" v-if="detailData.paymentMethod == 1">
            微信
          </div>
          <div class="right_ right_1" v-if="detailData.paymentMethod == 2">
            支付宝
          </div>
          <div class="right_ right_1" v-if="detailData.paymentMethod == 3">
            银行卡
          </div>
          <div class="right_ right_1" v-if="detailData.paymentMethod == 4">
            现金
          </div>
          <div class="right_ right_1" v-if="detailData.paymentMethod == 5">
            其他
          </div>
        </div>
        <div
          class="footer_item"
          v-if="detailData.paymentType == 0 && $route.query.index == 2"
        >
          <div class="left_">支付方式</div>
          <el-select
            v-model="paymentMethod"
            placeholder="请选择"
            class="bottom_scope"
            style="width: 100px"
          >
            <el-option value="">请选择</el-option>
            <el-option :value="1" label="微信"></el-option>
            <el-option :value="2" label="支付宝"></el-option>
            <el-option :value="3" label="银行卡"></el-option>
            <el-option :value="4" label="现金"></el-option>
            <el-option :value="5" label="其他"></el-option>
          </el-select>
        </div>
        <!-- <div class="footer_item" v-if="$route.query.index == 2">
          <div class="left_">公司运费</div>
          <input
            type="number"
            @blur="handleCompanyFreight"
            class="right_ right_2"
            v-model="companyFreight"
            style="margin-right: 5px"
          />
          &nbsp; 元
        </div> -->
        <!-- <div
          class="footer_item"
          v-if="$route.query.index == 1 && detailData.companyFreight"
        >
          <div class="left_">公司运费</div>
          <div class="right_ right_1">{{ detailData.companyFreight }}</div>
        </div> -->
        <div class="footer_item">
          <div class="left_">公司运费</div>
          <div class="right_ right_1">{{ detailData.companyFreight }}</div>
        </div>
        <div class="footer_item" v-if="$route.query.index == 2">
          <div class="left_">全单折扣</div>
          <input
            @blur="handleDiscount"
            type="number"
            class="right_ right_2"
            v-model="discount"
            style="margin-right: 5px"
          />
          &nbsp; %
        </div>
        <div
          class="footer_item"
          v-if="$route.query.index == 1 && detailData.discount"
        >
          <div class="left_">全单折扣</div>
          <div class="right_ right_1">{{ detailData.discount }}%</div>
        </div>
        <div class="footer_item" v-if="$route.query.index == 2">
          <div class="left_">抹零</div>
          <input
            type="number"
            class="right_ right_2"
            v-model="smallChange"
            @blur="handleSmallChange"
          />
        </div>
        <div class="footer_item" v-if="$route.query.index == 1">
          <div class="left_">抹零</div>
          <div class="right_ right_1">{{ detailData.smallChange }}元</div>
        </div>
      </div>
      <div class="num_footer" v-if="$route.query.index == 2">
        订单总计 <span>{{ totalPrice.toFixed(2) }}</span>
      </div>
      <div class="num_footer" v-if="$route.query.index == 1">
        订单总计
        <span v-if="detailData.totalAmount">{{ detailData.totalAmount }}</span>
        <span v-if="!detailData.totalAmount">{{ totalPrice.toFixed(2) }}</span>
      </div>
    </div>
    <div class="footerBtn" v-if="$route.query.index == 2">
      <div class="btn_item" @click="handleFan">取消</div>
      <div class="btn_item sure_" @click="handleShou">收款</div>
    </div>
  </div>
</template>
<script>
import { getOrderDetail, getOrderCollection } from "@/api/sale/index";
export default {
  data() {
    return {
      orderId: "",
      companyFreight: 0,
      paymentMethod: "",
      discount: 100, //折扣
      smallChange: 0, //抹零
      tableData: [],
      detailData: { customer: { customerTagList: [] } },
      totalPrice: 0,
      orderNumber: "",
    };
  },
  mounted() {
    this.detailData = JSON.parse(this.$route.query.rowDetail);
    this.companyFreight = this.detailData.companyFreight;
    this.orderNumber = this.$route.query.orderNumber;
    this.orderId = this.$route.query.orderId;
    console.log(this.detailData);
    getOrderDetail({ orderNumber: this.$route.query.orderNumber }).then(
      (res) => {
        if (res.code == 200) {
          this.tableData = res.rows;
          this.tableData.forEach((v) => {
            this.totalPrice += v.goodsPricing * v.goodsQuantity;
          });
          this.totalPrice = this.totalPrice + Number(this.companyFreight);
        }
      }
    );
  },
  methods: {
    handleShou() {
      //收款
      if (Number(this.discount) > 100 || Number(this.discount) <= 0) {
        this.$message({
          message: "折扣金额不合法",
          type: "warning",
        });
        return false;
      }
      if (
        Number(this.smallChange) >= Number(this.totalPrice) ||
        Number(this.smallChange) < 0
      ) {
        this.$message({
          message: "抹零金额不合法",
          type: "warning",
        });
        return false;
      }
      // if (Number(this.discount) == 100 && Number(this.smallChange)) {
      //   this.totalPrice = 0;
      //   this.tableData.forEach((v) => {
      //     this.totalPrice += v.goodsPricing * v.goodsQuantity;
      //   });
      //   this.totalPrice += Number(this.companyFreight);
      // }
      if (this.paymentMethod == "") {
        this.$message({
          message: "请选择支付方式",
          type: "warning",
        });
        return false;
      }
      getOrderCollection({
        orderId: this.orderId,
        orderNumber: this.orderNumber,
        companyFreight: Number(this.companyFreight),
        paymentMethod: Number(this.paymentMethod),
        discount: Number(this.discount),
        smallChange: Number(this.smallChange),
        totalAmount: Number(this.totalPrice).toFixed(2),
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "提交收款成功",
            type: "success",
          });
          this.companyFreight = "";
          this.paymentMethod = "";
          this.discount = 0; //折扣
          this.smallChange = 0; //抹零
          this.$router.go(-1);
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    handleCompanyFreight() {
      this.totalPrice = 0;
      this.tableData.forEach((v) => {
        this.totalPrice += v.goodsPricing * v.goodsQuantity;
      });
      this.discount = 100;
      this.smallChange = 0;
      this.companyFreight = Number(this.companyFreight).toFixed(2);
      this.totalPrice += Number(this.companyFreight);
    },
    handleDiscount() {
      //折扣
      this.totalPrice = 0;
      this.tableData.forEach((v) => {
        this.totalPrice += v.goodsPricing * v.goodsQuantity;
      });
      this.totalPrice += Number(this.companyFreight);

      if (Number(this.discount) > 100 || Number(this.discount) <= 0) {
        this.$message({
          message: "折扣金额不合法",
          type: "warning",
        });
        this.discount = 100;
        return false;
      }
      this.smallChange = 0;
      this.discount = Number(this.discount).toFixed(2);
      this.totalPrice = this.totalPrice * Number(this.discount) * 0.01;
      console.log(this.totalPrice);
    },
    handleSmallChange() {
      this.totalPrice = 0;
      this.tableData.forEach((v) => {
        this.totalPrice += v.goodsPricing * v.goodsQuantity;
      });
      this.totalPrice += Number(this.companyFreight);
      this.totalPrice = this.totalPrice * Number(this.discount) * 0.01;
      if (
        Number(this.smallChange) >= Number(this.totalPrice) ||
        Number(this.smallChange) < 0
      ) {
        this.$message({
          message: "抹零金额不合法",
          type: "warning",
        });
        this.smallChange = 0;
        return false;
      }
      this.smallChange = Number(this.smallChange).toFixed(2);
      this.totalPrice = this.totalPrice - Number(this.smallChange);
      console.log(this.totalPrice);
    },
    handleFan() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-select__caret {
  line-height: 28px !important;
}
.bottom_scope ::v-deep .el-input__inner {
  outline: line !important;
  height: 28px !important;
  line-height: 28px !important;
}
.labelList {
  margin-top: 20px;
  display: flex;
  cursor: pointer;
  .left_ {
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-right: 30px;
  }
  .right_ {
    .item_ {
      // margin-top: 10px;
      margin-bottom: 10px;
      display: flex;
      .one {
        height: 32px;
        background: #f3f3f3;
        border-radius: 4px;
        text-align: center;
        line-height: 32px;
        padding: 0 10px;
        font-size: 10px;
        // margin-right: 20px;
      }
      .xian {
        // padding-right: 1px;
        padding: 0 25px;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-top: -2px;
      }
      .two {
        font-size: 10px;
        margin-right: 10px;
        height: 32px;
        background: #f3f3f3;
        border-radius: 4px;
        line-height: 32px;
        padding: 0 10px;
      }
    }
  }
}
.app-main {
  height: 100vh !important;
  background-color: #ccc !important;
}
.main {
  padding: 25px 39px;
  box-sizing: border-box;
  min-height: 100vh;
  background-color: #f7f7f7;
  .footerBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    .btn_item {
      cursor: pointer;
      width: 130px;
      height: 48px;
      border: 1px solid #c1c1c1;
      border-radius: 6px;
      text-align: center;
      line-height: 48px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
      background-color: #fff;
    }
    .sure_ {
      margin-left: 50px;
      border: none;
      width: 130px;
      height: 48px;
      background: #4079ff;
      border-radius: 6px;
      color: #ffffff;
    }
  }
  .two_info {
    position: relative;
    margin-top: 25px;
    width: 100%;
    min-height: 200px;
    background: #fff;
    border-radius: 0px 0px 6px 6px;
    padding: 29px 25px;
    padding-bottom: 50px;
    box-sizing: border-box;
    .footer_list {
      position: absolute;
      right: 12%;
      bottom: 13px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .footer_item {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
        margin-right: 56px;
        .left_ {
          margin-right: 17px;
        }
        .right_1 {
          color: #4079ff;
          font-weight: 300;
        }
        .right_2 {
          width: 80px;
          height: 28px;
          background: #ffffff;
          border: 1px solid #e4e4e4;
          border-radius: 6px;
          text-align: center;
          line-height: 28px;
          outline: none;
        }
      }
    }
    .name_ {
      display: flex;
      justify-content: space-between;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      .orderNumber {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
    }
    .num_footer {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #000000;
      position: absolute;
      right: 30px;
      bottom: 5px;
      span {
        margin-top: -3px;
        font-size: 30px;
        margin-left: 10px;
      }
    }
  }
  .three_info {
    margin-top: 25px;
    .name_ {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
    }
    width: 100%;
    min-height: 120px;
    background: #fff;
    border-radius: 0px 0px 6px 6px;
    box-sizing: border-box;
    padding: 29px 32px;
    .list {
      margin-top: 25px;
      display: flex;
      align-items: center;
      .item_ {
        display: flex;
        align-items: center;
        .one {
          flex-shrink: 0;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000000;
          display: inline-block;
          margin-right: 40px;
        }
        .desc {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #777777;
          margin-right: 100px;
          max-width: 500px;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
  .one_info {
    box-sizing: border-box;
    width: 100%;
    min-height: 100px;
    background: #fff;
    border-radius: 0px 0px 6px 6px;
    padding: 23px 27px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    .name_ {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
    }
    .list_ {
      display: flex;
      .item_ {
        // width: 320px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 36px;
        margin-right: 23px;
        margin-top: 20px;
        margin-right: 100px;
        span {
          font-size: 10px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }
        .detail {
          padding-left: 15px;
          padding-right: 6px;
          box-sizing: border-box;
          font-size: 10px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          height: 36px;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>> 
